<template>
  <a-card :bordered="false">
    <a-form layout="inline">
      <a-row :gutter="24" style="margin-bottom: 24px;">
        <a-col :md="4" :sm="2" style="min-width: 260px;">
          <a-range-picker v-model="queryParam.dateRange" @change="onChange" />
        </a-col>
        <a-col :md="4" :sm="2" style="min-width: 224px;">
          <a-select v-model="queryParam.account" placeholder="请选择账户">
            <a-select-option v-for="item in accounts" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :md="4" :sm="24" style="min-width: 224px;">
          <a-select v-model="queryParam.type" placeholder="请选择日志类型" default-value="0">
            <a-select-option value="0">请选择日志类型</a-select-option>
            <a-select-option value="1">用户登录</a-select-option>
            <a-select-option value="2">试验管理</a-select-option>
            <a-select-option value="3">消息管理</a-select-option>
            <a-select-option value="4">账户管理</a-select-option>
            <a-select-option value="5">系统设置</a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-form>
    <s-table
      class="table_style"
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      showPagination="auto">
      <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
      <span slot="action" slot-scope="record" class="operation_button_box">
        <template>
          <a-button size="small" class="operation_button_passwd" @click="handleEdit(record)">编辑</a-button>
        </template>
      </span>
    </s-table>
    <a-modal centered :width="976" :footer="null" v-model="createFormEdit" @ok="handleOk">
      <template slot="title">
        <p class="createFormEdit_title">创建角色</p>
      </template>
      <div class="createFormEdit_content_modal">
        <a-form :form="form">
          <a-form-item label="权限描述">
            <a-input v-model="form.selectedPermission" v-decorator="['aaa', { rules: [{ required: true, message: '请输入权限描述!' }] }]" placeholder="请输入权限描述" />
          </a-form-item>
          <a-form-item label="角色分配">
            <a-select v-model="form.selectedRoles" mode="multiple" v-decorator="['dataPartner', { rules: [{ required: true, message: '请选择角色' }] },]" placeholder="请选择">
              <a-select-option v-for="item in roles" :key="item.id" :value="item.id">
                {{ item.roleName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="createFormEdit_font_box">
          <div class="createFormEdit_font">
            <a-button size="large" key="cancel" @click="handleCancel" style="margin-left:20px;">取消</a-button>
            <a-button
              size="large"
              key="forward"
              :loading="confirmLoading"
              type="primary"
              @click="handleNext"
              style="margin-left:20px;">确定</a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getOperationList, getAccountNameList } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis
    // TestDesign
  },
  data () {
    return {
      createFormEdit: false,
      // createFormBox: true,
      mdl: {},
      form: {},
      // 高级搜索 展开/关闭
      advanced: false,
      accounts: null,
      // roles: null,
      // 查询参数
      queryParam: {
        account: '请选择账户',
        type: '请选择日志类型',
        dateRange: null //
        // startDate: '', // 2019-01-01
        // endDate: '', // 2020-01-03
        // accountId: '', // 41d82fde8b8f4ec8843c8ecdf794be41
        // type: 1
      },
      // 表头
      visible: false,
      designArray: {
        '0': '预发布',
        '1': '进行中',
        '2': '暂停中',
        '3': '已结束'
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          // dataIndex: 'ctime',
          align: 'left'
        },
        {
          title: '时间',
          dataIndex: 'ctime',
          align: 'left'
        },
        {
          title: '账户',
          dataIndex: 'accountName',
          align: 'left'
        },
        {
          title: '日志',
          dataIndex: 'des',
          align: 'left'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let accountId = ''
        if (this.queryParam.account) {
          accountId = this.queryParam.account
        }

        if (accountId === '请选择账户') {
          accountId = ''
        }

        let startDate = ''
        let endDate = ''
        try {
          if (this.queryParam.dateRange) {
            startDate = this.queryParam.dateRange[0].format('YYYY-MM-DD')
            endDate = this.queryParam.dateRange[1].format('YYYY-MM-DD')
          }
        } catch (e) {
          console.log('loadData.param', e)
        }

        let type = ''
        if (this.queryParam.type) {
          type = this.queryParam.type
        }

        if (type === '0' || type === '请选择日志类型') {
          type = ''
        }

        const param = {
          accountId: accountId,
          startDate: startDate,
          endDate: endDate,
          type: type
        }

        console.log('loadData.param', param)
        console.log('loadData.parameter', parameter)
        return getOperationList(Object.assign(parameter, param))
          .then(res => {
            console.log(res.message)
            res.data.data = res.data.list
            return res.data
          })
      },
      selectedRowKeys: [],
      selectedRows: [],
      // selectedRoles: [],

      // custom table alert & rowSelection
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: true
    }
  },
  filters: {
    statusFilter (type) {
      // return statusMap[type].text
    },
    statusTypeFilter (type) {
      // return statusMap[type].status
    }
  },
  created () {
    this.tableOption()
    // getRoleList({ t: new Date() })
    this.getAccountNameList()
    // this.getRoleList()
  },
  methods: {
    // getPermissionDetail (record) {
    //   const params = {
    //     id: record.id
    //   }
    //   getPermissionDetail(params).then(res => {
    //     console.log(res.message)
    //     // this.roles = res.data
    //     this.form.selectedRoles = res.data.roles
    //     // return res.data
    //   })
    // },
    // getRoleList () {
    //   getRoleList().then(res => {
    //     console.log(res.message)
    //     this.roles = res.data
    //     // return res.data
    //   })
    // },
    getAccountNameList () {
      getAccountNameList().then(res => {
        console.log(res.message)
        const account = {
          id: '',
          name: '请选择账户'
        }
        this.accounts = [account].concat(res.data)
        // return res.data
      })
    },
    // CreateFormHandleCancel () {
    //   this.createFormBox = true
    // },
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
              props: {
                disabled: record.no === 'No 2', // Column configuration not to be checked
                name: record.no
              }
            })
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    handleNext () {
      this.createFormEdit = false
    },
    handleCancel () {
      this.createFormEdit = false
    },
    handleEdit (record) {
      this.createFormEdit = true
      // this.form.selectedPermission = record.detailDes
      // const params = {
      //   id: record.id
      // }
      // getPermissionDetail(params).then(res => {
      //   console.log(res.message)
      //   // this.roles = res.data
      //   this.form.selectedRoles = res.data.roles
      //   // return res.data
      // })
      // this.form.selectedRoles = []
      // console.log(record)
      // this.$refs.modal.edit(record)
    },
    handleSub (record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    tableStatusEvent (v) {
      // console.log(this.$refs.tableStatusEvent,"徐强ggg")
      // this.$refs.tableStatusEvent.onclick
      // this.visible = false
      console.log(this.visible, '徐强')
    },
    aaa () {

    }
  },
  watch: {
    queryParam: {
      handler (newValue, oldValue) {
        this.$refs.table.refresh(true)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.table_status {
  margin: 5px;
}
.ant-popover-title {
  width: 98px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.createFormEdit_title {
  font-size: 24px;
  font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  margin: 0px;
}
.createFormEdit_content {
  margin: 95px 66px;
}
.createFormEdit_content_modal {
  margin: 22px 66px 50px 66px;
}

.createFormEdit_title_box {
  margin-top: -30px;
}
.createFormEdit_font_box {
  height: 50px;
  .createFormEdit_font {
    float: right;
  }
}

.create_form_title {
  font-size: 24px;
  font-weight: bold;
  color: rgba(74, 74, 74, 1);
  line-height: 22px;
}

.ant-popover-inner-content {
  padding: 5px 10px;
}
.table_status_box:hover {
  background: red;
}
.popover_hint {
  background: red;
}
.operation_button_box {
  padding: 0px;
}
.operation_button_details {
  width: 74px;
  height: 32px;
}
.operation_button_release {
  width: 74px;
  height: 32px;
  margin-left: 10px;
  border: 1px #56ced1 solid;
}
.operation_button_release span {
  color: #56ced1;
}
.operation_button_release:hover {
  background: #c9eced;
  opacity: 0.8;
  border-color: #c9eced;
}

.operation_button_passwd {
  width: 74px;
  height: 32px;
  margin-left: 10px;
  border: 0px #eea91c solid;
  background: #eea91c !important;
  color: #fff;
  padding: 0 7px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}
.operation_button_passwd:hover {
  border: 1px #eea91c solid !important;
  background: #eea91c;
  opacity: 0.8;
}
</style>
